<template>
  <div id="app">
    <div class="nav">
      <!-- 标题列表 -->
      <div class="nav-list">
        <div
          v-for="(item, index) in navList"
          :key="index"
          :class="{ active: index == current }"
          @click="click(index)"
        >
          {{ item }}
        </div>
      </div>
      <!-- 下划线 -->
      <div class="nav-line"></div>
    </div>
  </div>
</template>
<script setup>
// var vm = new Vue({
//   el: "#app",
//   data: {
//     navList: ["首页", "头条", "特惠", "财经", "动漫"],
//   },
// });
const navList = ["首页", "头条", "特惠", "财经", "动漫"];
const click = (index) => {
  console.log("🚀 ~ file: login.vue:29 ~ click ~ index:", index);
  this.current = index;
};
</script>
<style>
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.nav {
  position: relative;
}

.nav-list {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.nav-line {
  width: 18px;
  height: 4px;
  border-radius: 2px;
  background-color: red;
  position: absolute;
  bottom: 0;
}
</style>